<template>
    <div>
      <div class="flex-container">
        <div class="flex-item">
          <div id="card">
            <img id="image" src="../assets/Login.png" alt="图片" width="40%" height="auto">
            <div id="text">
              <a-typography-title :heading="4">
                Hi, 朋友
              </a-typography-title>
              <a-typography-text>
                欢迎回来，让我们一起开启学习之旅吧！
              </a-typography-text>
            </div>
          </div>
        </div>
        <div class="flex-item">
          <div id="right">
            <div id="title">
              <div style="flex:2">
                <button class="next">&#8249;</button>
              </div>
              <div style="flex:3;">
                <a-typography-title :heading="4">
                  登录
                </a-typography-title>
              </div>
            </div>
            <div id="inp">
              <a-space direction="vertical" size="large">
                <p>用户名</p>
                <a-input :style="{ width: '600px', height: '60px' }" placeholder="请输入用户名" allow-clear>
                  <template #prefix>
                    <icon-user />
                  </template>
                </a-input>
                <p>密码</p>
                <a-input :style="{ width: '600px', height: '60px' }" placeholder="请输入密码" allow-clear>
                  <template #prefix>
                    <icon-lock />
                  </template>
                </a-input>
              </a-space>
              <div style="margin-top: 20%;margin-left: 40%;">
              <a-button type="primary" size="large" v-on:click="goToHome()">登录</a-button>
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  
  const goToHome = () => {
    router.push('/home')
    console.log('go to home')
  }
  </script>
  <style>
  /* 设置父容器为 Flex 容器 */
  .flex-container {
    display: flex;
    height: 100vh;
    width: 100vw;
    /* 设置容器高度为视口高度 */
  }
  
  /* 设置每个子元素占据父容器宽度的 50% */
  .flex-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 为了便于观察，添加边框 */
  }
  
  #card {
    border: thin solid #E5E5E5;
    margin: 0 0 0 10%;
    padding: 10px;
    border-radius: 20px;
    width: 70%;
    height: 80%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
  
  }
  
  #image {
    margin: 0% auto 30%;
  }
  
  #text {
    margin-bottom: 10%;
    text-align: center;
  
  }
  
  #right {
    height: 90%;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  
  #title {
    display: flex;
    margin-top: 5%;
    width: 100%;
  }
  
  
  .next {
    background-color: #7BE188;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
    margin-top: 32px;
    margin-bottom: 16px;
    /* margin-top: 20%;
    margin-left: 10%; */
  }
  
  .next:hover {
    background-color: #5cbf7d;
  }
  
  #inp {
    margin-top: 10%;
    width: 100%;
  }
  </style>
  